<template>
  <RouterView v-slot="{ Component }">
    <KeepAlive>
      <component :is="Component" ref="investDom" />
    </KeepAlive>
  </RouterView>

  <History ref="history" />

  <Teleport to="#headerWinNumber">
    <WinNumber @openHistoryPopup="openHistoryPopup" />
  </Teleport>
</template>

<script setup lang="ts">
import { defineAsyncComponent, ref } from 'vue'
import { useGameStore } from '@/stores/game'
import { LotterCodeEnum } from '@/enum'
// import WinNumber from '@/components/game/xglhc/win-number.vue'
// import History from '@/components/game/xglhc/history.vue'
const History = defineAsyncComponent(() => import('@/components/game/xglhc/history.vue'))
const WinNumber = defineAsyncComponent(() => import('@/components/game/xglhc/win-number.vue'))
const gameStore = useGameStore()

gameStore.setCurrentGame(LotterCodeEnum.xglhc)

const history = ref()

const openHistoryPopup = () => {
  setTimeout(() => {
    history.value?.showOrHide()
  }, 50)
}

const investDom = ref()

const open = () => {
  investDom.value?.open?.()
}

defineExpose({
  open,
})
</script>
